<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>控制台</h1>
      <p>欢迎使用浙江高职提前招生管理系统</p>
    </div>

    <div class="dashboard-content">
      <!-- 统计卡片 -->
      <div class="stats-grid">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon primary">
              <el-icon size="24"><Document /></el-icon>
            </div>
            <div class="stats-info">
              <h3>{{ stats.articlesCount }}</h3>
              <p>文章数量</p>
            </div>
          </div>
        </el-card>

        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon success">
              <el-icon size="24"><School /></el-icon>
            </div>
            <div class="stats-info">
              <h3>{{ stats.schoolsCount }}</h3>
              <p>院校数量</p>
            </div>
          </div>
        </el-card>

        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon warning">
              <el-icon size="24"><Folder /></el-icon>
            </div>
            <div class="stats-info">
              <h3>{{ stats.categoriesCount }}</h3>
              <p>分类数量</p>
            </div>
          </div>
        </el-card>

        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon info">
              <el-icon size="24"><View /></el-icon>
            </div>
            <div class="stats-info">
              <h3>{{ stats.todayViews }}</h3>
              <p>今日访问</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 快捷操作和最近文章 -->
      <div class="content-grid">
        <!-- 快捷操作 -->
        <el-card class="quick-actions">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="actions-grid">
            <div class="action-item" @click="$router.push('/admin/articles')">
              <el-icon size="32"><EditPen /></el-icon>
              <span>发布文章</span>
            </div>
            <div class="action-item" @click="$router.push('/admin/schools')">
              <el-icon size="32"><Plus /></el-icon>
              <span>添加院校</span>
            </div>
            <div class="action-item" @click="$router.push('/admin/categories')">
              <el-icon size="32"><FolderAdd /></el-icon>
              <span>管理分类</span>
            </div>
            <div class="action-item" @click="refreshStats">
              <el-icon size="32"><Refresh /></el-icon>
              <span>刷新数据</span>
            </div>
          </div>
        </el-card>

        <!-- 最近文章 -->
        <el-card class="recent-articles">
          <template #header>
            <div class="card-header">
              <span>最近文章</span>
              <el-button type="primary" size="small" @click="$router.push('/admin/articles')">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="articles-list">
            <div 
              v-for="article in recentArticles" 
              :key="article.id" 
              class="article-item"
            >
              <div class="article-info">
                <h4>{{ article.title }}</h4>
                <div class="article-meta">
                  <span>{{ article.categoryName }}</span>
                  <span>{{ formatDate(article.createTime) }}</span>
                </div>
              </div>
              <div class="article-status">
                <el-tag :type="article.status === 1 ? 'success' : 'warning'">
                  {{ article.status === 1 ? '已发布' : '草稿' }}
                </el-tag>
              </div>
            </div>
            <div v-if="!recentArticles.length" class="no-data">
              暂无文章
            </div>
          </div>
        </el-card>
      </div>

      <!-- 系统信息 -->
      <el-card class="system-info">
        <template #header>
          <div class="card-header">
            <span>系统信息</span>
          </div>
        </template>
        <div class="system-grid">
          <div class="system-item">
            <label>系统版本：</label>
            <span>v1.0.0</span>
          </div>
          <div class="system-item">
            <label>最后更新：</label>
            <span>{{ formatDate(new Date()) }}</span>
          </div>
          <div class="system-item">
            <label>运行时间：</label>
            <span>{{ uptime }}</span>
          </div>
          <div class="system-item">
            <label>数据库：</label>
            <span>MySQL 8.0</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useAdminStore } from '@/stores/admin'
import {
  Document,
  School,
  Folder,
  View,
  EditPen,
  Plus,
  FolderAdd,
  Refresh
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const adminStore = useAdminStore()

// 统计数据
const stats = ref({
  articlesCount: 0,
  schoolsCount: 0,
  categoriesCount: 0,
  todayViews: 0
})

// 最近文章
const recentArticles = ref([])

// 系统运行时间
const uptime = ref('0天0时0分')

// 获取统计数据
const getStats = async () => {
  try {
    // 模拟数据，实际应该调用API
    stats.value = {
      articlesCount: 156,
      schoolsCount: 47,
      categoriesCount: 12,
      todayViews: 1203
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 获取最近文章
const getRecentArticles = async () => {
  try {
    // 模拟数据，实际应该调用API
    recentArticles.value = [
      {
        id: 1,
        title: '2024年浙江省高职提前招生工作实施办法',
        categoryName: '招生政策',
        status: 1,
        createTime: new Date('2024-03-15')
      },
      {
        id: 2,
        title: '浙江工业职业技术学院2024年提前招生简章',
        categoryName: '招生简章',
        status: 1,
        createTime: new Date('2024-03-14')
      },
      {
        id: 3,
        title: '提前招生报名注意事项',
        categoryName: '报名指导',
        status: 0,
        createTime: new Date('2024-03-13')
      }
    ]
  } catch (error) {
    console.error('获取最近文章失败:', error)
  }
}

// 刷新统计数据
const refreshStats = async () => {
  try {
    await getStats()
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

// 格式化日期
const formatDate = (date) => {
  const d = new Date(date)
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${d.getFullYear()}-${month}-${day}`
}

// 计算系统运行时间
const calculateUptime = () => {
  const startTime = new Date('2024-01-01')
  const now = new Date()
  const diff = now - startTime
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  
  uptime.value = `${days}天${hours}时${minutes}分`
}

// 页面加载时获取数据
onMounted(() => {
  getStats()
  getRecentArticles()
  calculateUptime()
  
  // 每分钟更新一次运行时间
  setInterval(calculateUptime, 60000)
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 24px;
  
  .dashboard-header {
    margin-bottom: 32px;
    
    h1 {
      font-size: 28px;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #606266;
      margin: 0;
      font-size: 14px;
    }
  }
  
  .dashboard-content {
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 32px;
      
      .stats-card {
        :deep(.el-card__body) {
          padding: 20px;
        }
        
        .stats-item {
          display: flex;
          align-items: center;
          
          .stats-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            
            &.primary {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
            }
            
            &.success {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
              color: white;
            }
            
            &.warning {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
              color: #e6a23c;
            }
            
            &.info {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
              color: #409eff;
            }
          }
          
          .stats-info {
            h3 {
              font-size: 24px;
              font-weight: 600;
              color: #303133;
              margin: 0 0 4px 0;
            }
            
            p {
              color: #909399;
              font-size: 14px;
              margin: 0;
            }
          }
        }
      }
    }
    
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 32px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .quick-actions {
        .actions-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          
          .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover {
              border-color: #409eff;
              background-color: #f0f9ff;
              
              .el-icon {
                color: #409eff;
              }
            }
            
            .el-icon {
              color: #909399;
              margin-bottom: 8px;
              transition: color 0.3s;
            }
            
            span {
              font-size: 14px;
              color: #606266;
            }
          }
        }
      }
      
      .recent-articles {
        .articles-list {
          .article-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .article-info {
              flex: 1;
              
              h4 {
                font-size: 14px;
                color: #303133;
                margin: 0 0 8px 0;
                font-weight: 500;
              }
              
              .article-meta {
                display: flex;
                gap: 12px;
                
                span {
                  font-size: 12px;
                  color: #909399;
                }
              }
            }
            
            .article-status {
              margin-left: 16px;
            }
          }
          
          .no-data {
            text-align: center;
            padding: 40px 0;
            color: #909399;
            font-size: 14px;
          }
        }
      }
    }
    
    .system-info {
      .system-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        
        .system-item {
          display: flex;
          
          label {
            min-width: 80px;
            color: #606266;
            font-size: 14px;
          }
          
          span {
            color: #303133;
            font-size: 14px;
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
    
    .dashboard-content {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      
      .content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        
        .quick-actions {
          .actions-grid {
            grid-template-columns: repeat(4, 1fr);
            
            .action-item {
              padding: 12px 8px;
              
              span {
                font-size: 12px;
              }
            }
          }
        }
      }
      
      .system-info {
        .system-grid {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}
</style>